import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default class Group extends Component {
  render() {
    const {children, title} = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>{title}</Text>
        </View>
        <View style={styles.childrenContainer}>{children}</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 10,
  },
  titleContainer: {
    paddingHorizontal: 16,
  },
  title: {
    color: '#888',
  },
  childrenContainer: {
    paddingTop: 10,
  },
});
